<template>

<!-- -------------------------------------------- -->
  <el-main>
    <!--  搜索新增板块  -->
    <el-form
        :model="searchPrm"
        ref="searchForm"
        label-width="80px"
        :inline="true"
        size="small"
    >
<!--      <el-form-item>-->
<!--        <el-input placeholder="请输入部门名称" v-model="searchPrm.searchName"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item>
<!--        <el-button icon="el-icon-search">查询</el-button>-->
<!--        <el-button style="color:#FF7670" icon="el-icon-close">重置</el-button>-->
<!--        <el-button  @click="dialogVisible=true" type="primary" icon="el-icon-plus">新增</el-button>-->
      </el-form-item>

    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="门诊处方" name="first">
        <!--   表格显示   -->
        <el-table
            stripe
            style="width: 100%"
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
          <el-table-column
              prop="prescriptionId"
              label="处方单号">
          </el-table-column>
          <el-table-column
              prop="registration.registrationNumber"
              label="门诊号">
          </el-table-column>
          <el-table-column
              prop="registration.patient.patientDataName"
              label="病人姓名"
              width="70">
          </el-table-column>
          <el-table-column
              prop="prescriptionTime"
              label="就诊日期">
          </el-table-column>
          <el-table-column
              prop="prescriptionMoney"
              label="处方金额"
              width="70">
          </el-table-column>
          <el-table-column  label="操作" width="130px">
            <template  #default="scope">
              <el-tooltip content="详情" placement="top">
                <el-button
                    icon="el-icon-edit" size="mini"
                    @click="prescriptionDetails(scope.row)"></el-button>
              </el-tooltip>

            </template>
          </el-table-column>
        </el-table>


        <!--分页-->
        <div class="fy_div" style="margin-left: 400px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
          </el-pagination>
        </div>

        <!--   新增按钮表单   -->
        <el-dialog
            @close="clearRecord()"
            title="提示"
            v-model="dialogVisible"
            width="60%"
            :before-close="handleClose">
          <el-form  status-icon  ref="record" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="10">
                <el-form-item label="体检人">
                  <el-input v-model="record.recordName"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="体检时间">
                  <el-date-picker
                      format="YYYY-MM-DD HH:mm:ss"
                      v-model="record.recordTime"
                      type="datetime"
                      placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>

              </el-col>

              <el-col :span="10">
                <el-form-item label="执行人">
                  <el-input v-model="record.recordZxr"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">

                <!--            <el-form-item label="类别">-->

                <!--              <el-select v-model="record.yxjPhysical.phId" @change="dian(record.yxjPhysical.phId)" :disabled="is">-->

                <!--                <el-option-->
                <!--                    v-for="item in Physical1"-->
                <!--                    :key="item.yxjPhysical.phId"-->
                <!--                    :label="item.yxjPhysical.phName"-->
                <!--                    :value="item.yxjPhysical.phId"-->
                <!--                />-->

                <!--              </el-select>-->

                <!--            </el-form-item>-->
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="规格">
                  <el-input v-model="yxjPhysical.phType" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="负责院">
                  <el-input v-model="yxjPhysical.phCharge" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="单价">
                  <el-input v-model="yxjPhysical.phPrice" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>

          <template #footer>
      <span class="dialog-footer">
        <el-button @click="clearRecord(),dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRecord(),dialogVisible = false">确 定</el-button>
      </span>
          </template>

        </el-dialog>

      </el-tab-pane>


      <el-tab-pane label="住院处方" name="second">

        <el-table :data="tableData2">
          <el-table-column
              prop="recipeId"
              label="处方号">
          </el-table-column>
          <el-table-column
              prop="tyhPatientEntity.patientName"
              label="病人姓名"
              width="80px">
          </el-table-column>
          <el-table-column
              prop="recipeDate"
              :formatter="dateformat"
              label="处方时间"
              width="170px">
          </el-table-column>
          <el-table-column
              prop="recipeDay"
              label="执行天数">
          </el-table-column>
          <el-table-column
              prop="recipePrice"
              label="处方金额">
          </el-table-column>
          <el-table-column  label="操作">
            <template  #default="scope">
              <el-tooltip content="查看" placement="top">
                <el-button
                    icon="el-icon-edit" size="mini"
                    @click="xiangxi(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="处方作废" placement="top">
                <el-button
                    icon="el-icon-delete" size="mini"
                    @click=""></el-button>
              </el-tooltip>
            </template>

          </el-table-column>
        </el-table>


        <!--分页-->
        <div class="fy_div" style="margin-left: 400px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData2.length">
          </el-pagination>
        </div>

        <!--   新增按钮表单   -->
        <el-dialog
            @close="clearRecord()"
            title="提示"
            v-model="dialogVisible"
            width="60%"
            :before-close="handleClose">
          <el-form  status-icon  ref="record" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="10">
                <el-form-item label="体检人">
                  <el-input v-model="record.recordName"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="体检时间">
                  <el-date-picker
                      format="YYYY-MM-DD HH:mm:ss"
                      v-model="record.recordTime"
                      type="datetime"
                      placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>

              </el-col>

              <el-col :span="10">
                <el-form-item label="执行人">
                  <el-input v-model="record.recordZxr"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                {{Physical1}}1212
                <!--            <el-form-item label="类别">-->

                <!--              <el-select v-model="record.yxjPhysical.phId" @change="dian(record.yxjPhysical.phId)" :disabled="is">-->

                <!--                <el-option-->
                <!--                    v-for="item in Physical1"-->
                <!--                    :key="item.yxjPhysical.phId"-->
                <!--                    :label="item.yxjPhysical.phName"-->
                <!--                    :value="item.yxjPhysical.phId"-->
                <!--                />-->

                <!--              </el-select>-->

                <!--            </el-form-item>-->
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="规格">
                  <el-input v-model="yxjPhysical.phType" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="负责院">
                  <el-input v-model="yxjPhysical.phCharge" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="单价">
                  <el-input v-model="yxjPhysical.phPrice" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>

          <template #footer>
      <span class="dialog-footer">
        <el-button @click="clearRecord(),dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRecord(),dialogVisible = false">确 定</el-button>
      </span>
          </template>

        </el-dialog>

      </el-tab-pane>

      <el-tab-pane label="住院体检记录" name="three">

        <el-table :data="tableData3">
          <el-table-column
              prop="recordId"
              label="体检号">
          </el-table-column>
          <el-table-column
              prop="patientEntity.patientName"
              label="病人姓名"
              width="80px">
          </el-table-column>
          <el-table-column
              prop="projectEntities[0].projectName"
              :formatter="dateformat"
              label="体检项目"
              width="170px">
          </el-table-column>
          <el-table-column
              prop="projectEntities[0].projectPrice"
              label="项目金额">
          </el-table-column>
          <el-table-column label="体检登录人" prop="recordName"></el-table-column>

        </el-table>


        <!--分页-->
        <div class="fy_div" style="margin-left: 400px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData3.length">
          </el-pagination>
        </div>


      </el-tab-pane>


      <el-tab-pane label="门诊处方体检记录" name="four">


        <el-table
            stripe
            style="width: 100%"
            :data="tableData4.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
          <el-table-column
              prop="prescriptionId"
              label="处方单号">
          </el-table-column>
          <el-table-column
              prop="registration.registrationNumber"
              label="门诊号">
          </el-table-column>
          <el-table-column
              prop="registration.patient.patientDataName"
              label="病人姓名"
              width="70">
          </el-table-column>
          <el-table-column
              prop="prescriptionTime"
              label="就诊日期">
          </el-table-column>
          <el-table-column
              prop="prescriptionMoney"
              label="处方金额"
              width="70">
          </el-table-column>
          <el-table-column  label="操作" width="130px">
            <template  #default="scope">
              <el-tooltip content="详情" placement="top">
                <el-button
                    icon="el-icon-edit" size="mini"
                    @click="prescriptionDetails(scope.row)"></el-button>
              </el-tooltip>


            </template>
          </el-table-column>
        </el-table>


        <!--分页-->
        <div class="fy_div" style="margin-left: 400px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData4.length">
          </el-pagination>
        </div>



      </el-tab-pane>

    </el-tabs>


  </el-main>

</template>

<script>

import http, {service} from "@/http/request";
import Cookies from 'js-cookie';

export default {
  name: "YxjPhysical",
  data() {
    return {
      ruleFrom:{
        recordName:'',
        tyhRecipedetailEntities:[],
      },

      activeName: 'first',
      tableData2:[],
      tableData: [],
      tableData3:[],
      tableData4:[],
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      dialogVisible: false,
      is:false,
      // 页面表格显示
      record:{
        recordId:'',
        recordName:'',
        recordZxr:'',
        recordTime:'',
        phId:'',

      },
      Physical1:[],
      //搜索关键字
      searchPrm: {
        searchName: ''
      },//

      yxjPhysical:{
        phId:'',
        phName:'',
        phType:'',
        phCharge:'',
        phPrice:'',
      }
    }
  },

  methods: {

    prescriptionDetails(s){
      this.$router.push({path: '/YxjPhysicalDetails',query:{ id:s.prescriptionId}});
    },


    // //查询门诊所有体检项目
    // initData() {
    //   service.get("http://localhost:8088/allTjRecord")
    //       .then((v) => {
    //         this.tableData = v.data;
    //         console.log("3333333333",this.tableData)
    //       })
    // },


    //查询处方
    initData(){
      service("http://localhost:8088/find-ZsxRecord2")
          .then((v) => {
            this.tableData = v.data;
          })
    },


    //查询处方
    initData2(){
      service.get("find-YXJrecord")
          .then((v) => {
            this.tableData2 = v.data;
          })
    },

    //住院体检记录
    initData3(){
      service.get("find-yxjRecord2")
          .then((v) => {
            this.tableData3 = v.data;
          })
    },
    initData4(){

      service("http://localhost:8088/find-ZsxRecord3")
          .then((v) => {
            this.tableData4 = v.data;
          })

    },
    xiangxi(s){
      this.$router.push({path: '/YxjPhysicalDetails2',query:{ id:s.recipeId,value:JSON.stringify(s)}});
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },

    //按钮表单弹出
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },


    // 新增体检记录
    addRecord(){
      // console.log(this.record)
      this.record.phId=this.record.yxjPhysical.phId
      service.post("http://localhost:8088/addRecord",this.record)
          .then((v)=>{
            this.initData()
          })
    },
    // 新增结束

    // 修改体检记录
    updateRecord(record){
      this.is=true;
      this.record.recordId = record.recordId
      this.record.recordName = record.recordName
      this.record.recordZxr = record.recordZxr
      this.record.recordTime = record.recordTime
      this.record.yxjPhysical.phId=record.yxjPhysical.phId;
      this.yxjPhysical.phType=record.yxjPhysical.phType;
      this.yxjPhysical.phCharge=record.yxjPhysical.phCharge;
      this.yxjPhysical.phPrice=record.yxjPhysical.phPrice;
    },
    // 修改结束

    // 根据id 进行记录删除
    delRecord(row){
      this.record.recordId = row.recordId
      service.post("http://localhost:8088/delRecord",this.record)
          .then((v) =>{
            this.initData()
          })
    },
    // 结束

    // chang点击事件
    dian(phId){
      service.get("http://localhost:8088/find-id",{params:{phId:phId}})
          .then((v) => {
            this.yxjPhysical = v.data;
            console.log("22",this.yxjPhysical)
          })
    },
    // 结束


    // 查询体检类别表
    selPhysical(){
      service.get("http://localhost:8088/selPhysical")
          .then((v) =>{
            this.Physical1 = v.data
          })
    },




    // 清空表单
    clearRecord(){
      this.is=false;
      this.record = {
        recordId: '',
        recordName: '',
        recordZxr: '',
        yxjPhysical:{
          phName: '',
          phId: '',
          phCharge: '',
          phPrice: '',
          phType: '',
        },

      },
      this.yxjPhysical ={
            phName: '',
            phId: '',
            phCharge: '',
            phPrice: '',
            phType: '',
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

  },

  created() {
    this.initData();
    this.initData2();
    this.initData3();
    this.initData4();
    this.selPhysical();
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.el-card {
  margin-top: 50px;

}

.block {
  margin-left: 350px;
}

.fy_div {
  margin-top: 20px;
  margin-left: -30px;
}
</style>
